* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(200deg, #00c6fb, #66a6ff);
}

nav ul {
  list-style-type: none;
}

nav ul li {
  /* 自定义属性 */
  --c: #fff;
  --active-color: #000;
  /* 相对定位 */
  position: relative;
  color: var(--c);
  border: 2px solid var(--c);
  width: 240px;
  height: 60px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  margin: 30px;

  /* 溢出隐藏 */
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

nav ul li .text {
  /* 防止文字被云朵挡住 */
  z-index: 1;
  transition: all 0.5s ease-in-out;
}

nav ul li:hover {
  border-color: var(--active-color);
}

nav ul li:hover .text {
  /* 鼠标放上去的时候文字白色, 防止和白色云朵颜色相同, 无法显示文字 */
  color: var(--active-color);
}

nav ul li .cloud {
  /* 绝对定位, 行内元素会变成块级元素 */
  position: absolute;
  width: 25%;
  height: 100%;
  background-color: var(--c);
  border-radius: 50%;

  /* 沿 Y 轴平移自己高度的150% */
  transform: translateY(150%);

  /* 重点来了 */
  left: calc((var(--n) - 1) * 25%);
  top: 0;

  transition: all 0.5s ease-in-out;
  transition-delay: calc((var(--n) - 1) * 100ms);

  /* 防止云朵挡住文字 */
  z-index: -1;
}

nav ul li:hover .cloud {
  /* 沿 Y 轴平移并方法 */
  transform: translateY(0) scale(2);
}

/* 自定义属性 */
nav ul li .cloud:nth-of-type(1) {
  --n: 1;
}
nav ul li .cloud:nth-of-type(2) {
  --n: 2;
}
nav ul li .cloud:nth-of-type(3) {
  --n: 3;
}
nav ul li .cloud:nth-of-type(4) {
  --n: 4;
}
